<template>
    <!-- <button @click="props.editable = !props.editable">{{ props.editable }}</button> -->
    <div ref="container" />
</template>

<script lang="ts">
export default { name: 'DatePicker' }
</script>

<script lang="ts" setup>
// @ts-nocheck
import { reactive, h, render, ref, watch, nextTick, computed, onMounted } from 'vue'

const props = reactive({
    type: 'date',
    firstDayOfWeek: 1,
    clearable: true,
    editable: true,
    value: '2022-08-13 13:15:00, 2022-09-13 13:15:00',
})
// 选择的日期类型：'date'：年月日； 'datetime'：年月日时分秒； 'daterange'：年月日区间； 'datetimerange'：年月日时分秒区间； 'month'：年月； 'monthrange'：年月区间； 'year'：年；'yearrange'：年区间； 'quarter'：年季度；'quarterrange'：年季度区间。例如：'date'
const state = reactive({
    popup: [
        { xPos: 0, yPos: 0, visible: false },
        { xPos: 0, yPos: 0, activeType: '', visible: false },
    ],
    values: [],
    inputValues: [], // input值
    rangeing: false,
    viewValues: {
        mainPanel: [], // 用于页面翻页展示的值
        mainDate: [], // 页面选中的值
    },
})

// 数字星期对应map
const weekMap = new Map([[1, '一'], [2, '二'], [3, '三'], [4, '四'], [5, '五'], [6, '六'], [0, '日']])

const container = ref()

// 是否区间
const isRange = computed(() => props.type.indexOf('range') !== -1)

// 是否含有时间
const hasTime = computed(() => props.type.indexOf('time') !== -1)

const dateScheme = computed(() => {
    switch (props.type) {
    case 'date':
    case 'daterange':
        return 'YYYY-MM-DD'
    case 'datetime':
    case 'datetimerange':
        return 'YYYY-MM-DD HH:mm:ss'
    case 'year':
    case 'yearrange':
        return 'YYYY'
    case 'month':
    case 'monthrange':
        return 'YYYY-MM'
    case 'quarter':
    case 'quarterrange':
        return 'YYYY-第Q季度'
    default:
        return 'YYYY-MM-DD HH:mm:ss'
    }
})

const isDate = (inDate) => {
    const date = inDate instanceof Date ? inDate : new Date(inDate)
    return date.toString() !== 'Invalid Date'
}

// 获得星期顺序
const weekOrder = computed(() => {
    const order = []
    for (let i = props.firstDayOfWeek; i <= 6; i++) {
        order.push(i)
    }
    for (let i = 0; i < props.firstDayOfWeek; i++) {
        order.push(i)
    }
    return order
})

const needConfirm = computed(() => isRange.value || props.type.includes('month') || props.type.includes('quarter'))

// 补位至2位
const padStart = (num) => num.toString().padStart(2, '0')

// YYYY年 MM月 DD日 HH时 mm分 ss秒
const format = (inDate, format = dateScheme.value) => {
    if (!inDate) return ''
    const date = inDate instanceof Date ? inDate : new Date(inDate)
    let result = format.replace(/YYYY/g, date.getFullYear())
        .replace(/MM/g, padStart(date.getMonth() + 1))
        .replace(/DD/g, padStart(date.getDate()))
        .replace(/HH/g, padStart(date.getHours()))
        .replace(/mm/g, padStart(date.getMinutes()))
        .replace(/ss/g, padStart(date.getSeconds()))
    if (format.includes('Q')) {
        const quarter = Math.ceil((date.getMonth() + 1) / 3)
        result = result.replace(/Q/g, quarter)
    }
    return result
}

const betweenRange = (inDate, day) => {
    if (!isRange.value) return ''
    const date = new Date(inDate)
    date.setDate(day)

    const dateStr = Number(format(date, 'YYYY-MM-DD').replace(/-/g, ''))
    const firstDateStr = Number(format(state.viewValues.mainDate[0], 'YYYY-MM-DD').replace(/-/g, ''))
    const lastDateStr = Number(format(state.viewValues.mainDate[1], 'YYYY-MM-DD').replace(/-/g, ''))

    if ((dateStr > firstDateStr && dateStr < lastDateStr) || (dateStr < firstDateStr && dateStr > lastDateStr)) {
        return 'in-range'
    } if (dateStr === firstDateStr) {
        return 'first-range'
    } if (dateStr === lastDateStr) {
        return 'last-range'
    }
    return ''
}

const findDomPanelIndex = (dom) => {
    const panelIndex = dom.getAttribute('panelindex')
    if (panelIndex === null) {
        return findDomPanelIndex(dom.parentElement)
    }
    return Number(panelIndex)
}

let mousemovePreDom = null
const panelMouseMove = (event) => {
    if (event.target.classList.contains('date-node') && mousemovePreDom !== event.target) {
        mousemovePreDom = event.target
        const panelIndex = findDomPanelIndex(event.target)
        const newDate = new Date(state.viewValues.mainPanel[panelIndex])
        newDate.setDate(event.target.innerText)
        if (event.target.classList.contains('pre-month')) newDate.setMonth(newDate.getMonth() - 1)
        else if (event.target.classList.contains('next-month')) newDate.setMonth(newDate.getMonth() + 1)
        state.viewValues.mainDate[1] = newDate
    }
}

const myRender = async () => {
    console.log('myRender')

    render(h('div', { class: 'rc-date-picker-inner' }, createContainer()), container.value)
    await nextTick()
    container.value.querySelectorAll('.input-inner').forEach((dom) => {
        if (props.editable === false) {
            dom.setAttribute('readonly', 'readonly')
        } else {
            dom.removeAttribute('readonly')
        }
    })
}

watch(() => props.value, (newVal) => {
    state.values = newVal.split(',').map((item) => new Date(item))
}, { immediate: true })

watch(() => state.values, (newVal) => {
    state.inputValues = newVal.map((item) => format(item))
}, { deep: true, immediate: true })

watch([props, state], () => {
    myRender()
}, { deep: true })

// 初始化创建input,popup
const createContainer = () => [
    createInput(),
    (props.type.includes('date') || props.type.includes('time')) && createPanelPopup(),
    props.type.includes('year') && createPanelPopup(['YYYY']),
    props.type.includes('month') && createPanelPopup(['YYYY', 'MM']),
    props.type.includes('quarter') && createPanelPopup(['YYYY', 'Q']),
]

// 主输入框
const createInput = () => {
    const onBlur = (event, inputIndex) => {
        if (isDate(event.target.value)) {
            state.values[inputIndex] = new Date(event.target.value)
        } else {
            event.target.value = state.inputValues[inputIndex]
        }
    }
    return h('div', {
        class: {
            'rc-date-picker-input': true,
            'is-range': isRange.value,
            active: state.popup[0].visible,
        },
        onClick: (event) => {
            event.stopPropagation()
            state.viewValues.mainPanel = state.values.map((item, index) => {
                if (item) return new Date(item)

                const date = new Date()
                date.setMonth(date.getMonth() + index)
                return date
            })
            state.viewValues.mainDate = JSON.stringify(state.values) === '["",""]' ? [] : state.viewValues.mainPanel.map((item) => new Date(item))

            state.popup[0].visible = true
            container.value.querySelector('.main-panel')?.removeEventListener('mousemove', panelMouseMove)
            state.rangeing = false
        },
    }, [
        h('input', {
            value: state.inputValues[0],
            onBlur: (event) => { onBlur(event, 0) },
            class: {
                'input-inner': true,
                'input-pre': true,
            },
        }),
        isRange.value && h('span', {
            class: {
                'input-inner-separator': true,
                'input-icon': true,
            },
        }, '至'),
        isRange.value && h('input', {
            value: state.inputValues[1],
            class: {
                'input-inner': true,
                'input-suf': true,
            },
            onBlur: (event) => { onBlur(event, 1) },
        }),
        props.clearable && h('span', {
            class: {
                'input-inner-suffix': true,
                'input-icon': true,
            },
            onClick: (event) => {
                event.stopPropagation()
                state.values = ['', '']
                state.popup[0].visible = false
            },
        }, '尾'),
    ])
}

const createPanelPopup = (type) => {
    state.popup[1].activeType = type ? 'onlyOnePopup' : state.popup[1].activeType
    return h('div', {
        class: {
            'popup-container': true,
            show: state.popup[0].visible,
        },
        style: {
            left: '0px',
            top: '44px',
            height: state.popup[0].visible ? '307px' : '0px',
        },
        onClick: (event) => {
            event.stopPropagation()
            state.popup[1].visible = false
        },
    }, [
        h(
            'div',
            {
                class: 'main-panel',
                style: {
                    display: 'grid',
                    'grid-template-columns': `repeat(${isRange.value ? 2 : 1}, 1fr)`,
                },
            },
            !type && [
                createDatePanel(0),
                isRange.value && createDatePanel(1),
            ],
            type && [
                createListPopupPanel(type, 0),
                isRange.value && createListPopupPanel(type, 1),
            ],
        ),
        h('div', { class: 'footer' }, [
            !isRange.value && h('button', {
                class: 'btn btn-now',
                onClick: () => {
                    state.values[0] = new Date()
                    state.popup[0].visible = false
                },
            }, '此刻'),
            props.clearable && h('button', {
                class: 'btn btn-clear',
                onClick: () => {
                    state.values = ['', '']
                    state.popup[0].visible = false
                },
            }, '清除'),
            needConfirm.value && h('button', {
                class: 'btn btn-confirm',
                onClick: () => {
                    if (isRange.value && state.rangeing) return
                    if (state.popup[1].activeType === 'onlyOnePopup') {
                        state.viewValues.mainDate = state.viewValues.mainPanel.map((item) => new Date(item))
                    } else {
                        state.viewValues.mainDate.forEach((item, index) => {
                            item.setHours(state.viewValues.mainPanel[index].getHours())
                            item.setMinutes(state.viewValues.mainPanel[index].getMinutes())
                            item.setSeconds(state.viewValues.mainPanel[index].getSeconds())
                        })
                    }
                    if (isRange.value && state.viewValues.mainDate[0] > state.viewValues.mainDate[1]) {
                        const t = state.viewValues.mainDate[0]
                        state.viewValues.mainDate[0] = state.viewValues.mainDate[1]
                        state.viewValues.mainDate[1] = t
                    }

                    state.values = state.viewValues.mainDate.map((item) => new Date(item))
                    state.popup[0].visible = false
                },
            }, '确认'),
        ]),
    ])
}

const createDatePanel = (panelIndex) => {
    const date = state.viewValues.mainPanel[panelIndex]
    const dateList = []
    const firstDayOfMonth = new Date(date)
    firstDayOfMonth.setDate(1)
    const startByCalendarWeek = weekOrder.value.indexOf(firstDayOfMonth.getDay())

    const checkCurrentDay = (current) => !state.rangeing
        && current.type === 'current-month'
        && state.viewValues.mainDate[panelIndex]?.getFullYear() === state.viewValues.mainPanel[panelIndex]?.getFullYear()
        && state.viewValues.mainDate[panelIndex]?.getMonth() === state.viewValues.mainPanel[panelIndex]?.getMonth()
        && state.viewValues.mainDate[panelIndex]?.getDate() == current.day

    // 上个月
    {
        const preMonth = new Date(date)
        preMonth.setDate(0)
        const preDays = preMonth.getDate()
        const preStart = preDays - startByCalendarWeek === preDays ? preDays - startByCalendarWeek - 6 : preDays - startByCalendarWeek + 1
        for (let i = preStart; i <= preDays; i++) {
            dateList.push({
                type: 'pre-month',
                day: i,
            })
        }
    }
    // 本月
    {
        const currentMonth = new Date(date)
        currentMonth.setMonth(currentMonth.getMonth() + 1)
        currentMonth.setDate(0)
        const currentDays = currentMonth.getDate()
        for (let i = 1; i <= currentDays; i++) {
            dateList.push({
                type: 'current-month',
                day: i,
            })
        }
    }
    // 下个月
    {
        const nextMonthLength = 42 - dateList.length
        for (let i = 1; i <= nextMonthLength; i++) {
            dateList.push({
                type: 'next-month',
                day: i,
            })
        }
    }

    return h('div', {
        panelIndex,
        class: {
            'date-picker-panel': true,
        },
    }, [
        hasTime.value && h('div', { class: 'top-container' }, [
            h('input', {
                class: {
                    'panel-input': true,
                    'date-input': true,
                },
                value: format(state.viewValues.mainDate[panelIndex], 'YYYY-MM-DD'),
                onBlur: (event) => {
                    if (isDate(event.target.value)) {
                        const newDate = new Date(state.viewValues.mainDate[panelIndex])
                        const tempDate = new Date(event.target.value)
                        newDate.setFullYear(tempDate.getFullYear())
                        newDate.setMonth(tempDate.getMonth())
                        newDate.setDate(tempDate.getDate())
                        state.viewValues.mainDate[panelIndex] = newDate
                    } else {
                        event.target.value = format(state.inputValues[panelIndex], 'YYYY-MM-DD')
                    }
                },
            }),
            h('div', {
                style: {
                    position: 'relative',
                },
            }, h('input', {
                class: {
                    'panel-input': true,
                    'time-input': true,
                },
                value: format(state.viewValues.mainPanel[panelIndex], 'HH:mm:ss'),
                onBlur: (event) => {
                    if (isDate(`2000-01-01 ${event.target.value}`)) {
                        const newDate = new Date(state.viewValues.mainPanel[panelIndex])
                        const tempDate = new Date(`2000-01-01 ${event.target.value}`)
                        newDate.setHours(tempDate.getHours())
                        newDate.setMinutes(tempDate.getMinutes())
                        newDate.setSeconds(tempDate.getSeconds())
                        state.viewValues.mainPanel[panelIndex] = newDate
                        state.viewValues.mainDate[panelIndex] = new Date(newDate)
                    } else {
                        event.target.value = format(state.inputValues[panelIndex], 'HH:mm:ss')
                    }
                },
                onClick: (event) => {
                    event.stopPropagation()
                    state.popup[1].activeType = `mainTime-${panelIndex}`
                    state.popup[1].visible = true
                },
            }), state.popup[1].activeType === `mainTime-${panelIndex}` && createListPopupPanel(['HH', 'mm', 'ss'], panelIndex)),
        ]),
        h('div', { class: 'middle-container' }, [
            h('div', {
                class: 'oprate',
            }, [
                h('div', { class: 'oprate-pre' }, [
                    h('span', {
                        class: 'oprate-icon oprate-home stride',
                        onClick: () => {
                            date.setFullYear(date.getFullYear() - 1)
                            myRender()
                        },
                    }, '←'),
                    h('span', {
                        class: 'oprate-icon oprate-up step',
                        onClick: () => {
                            date.setMonth(date.getMonth() - 1)
                            myRender()
                        },
                    }, '<'),
                ]),
                h('div', {
                    class: 'main-panel-date',
                    onClick: (event) => {
                        event.stopPropagation()
                        state.popup[1].activeType = `mainDate-${panelIndex}`
                        state.popup[1].visible = true
                    },
                }, [
                    format(date, 'YYYY年MM月'),
                    state.popup[1].activeType === `mainDate-${panelIndex}` && createListPopupPanel(['YYYY', 'MM'], panelIndex),
                ]),
                h('div', { class: 'oprate-suf' }, [
                    h('span', {
                        class: 'oprate-icon oprate-down step',
                        onClick: () => {
                            date.setMonth(date.getMonth() + 1)
                            myRender()
                        },
                    }, '>'),
                    h('span', {
                        class: 'oprate-icon oprate-end stride',
                        onClick: () => {
                            date.setFullYear(date.getFullYear() + 1)
                            myRender()
                        },
                    }, '→'),
                ]),
            ]),
            h('div', {
                class: 'calendar',
            }, [
                h('div', { class: 'title-of-week-container' }, weekOrder.value.map((item) => h('div', { class: 'title-of-week' }, weekMap.get(item)))),
                h('div', {
                    class: 'main-date-choose',
                }, dateList.map((current) => h('div', {
                    class: {
                        [current.type]: true,
                        'date-node': true,
                        current: checkCurrentDay(current),
                        [betweenRange(state.viewValues.mainPanel[panelIndex], current.day)]: current.type === 'current-month',
                    },
                    onClick: () => {
                        if (current.type === 'pre-month' || current.type === 'next-month') {
                            const diff = current.type === 'pre-month' ? -1 : 1
                            state.viewValues.mainPanel[panelIndex].setMonth(state.viewValues.mainPanel[panelIndex].getMonth() + diff)
                            myRender()
                            return
                        }
                        if (isRange.value) {
                            if (!state.rangeing) {
                                state.rangeing = true
                                state.viewValues.mainDate[0] = new Date(date)
                                state.viewValues.mainDate[0].setDate(current.day)
                                state.viewValues.mainDate[1] = new Date(state.viewValues.mainDate[0])
                                container.value.querySelector('.main-panel').addEventListener('mousemove', panelMouseMove)

                                container.value.querySelectorAll('.date-node').forEach((dom) => {
                                    dom.classList.remove('in-range')
                                    dom.classList.remove('last-range')
                                })
                            } else if (state.rangeing) {
                                state.rangeing = false
                                container.value.querySelector('.main-panel').removeEventListener('mousemove', panelMouseMove)
                                const lastDate = state.viewValues.mainDate[1]
                                state.viewValues.mainDate[1].setFullYear(lastDate.getFullYear())
                                state.viewValues.mainDate[1].setMonth(lastDate.getMonth())
                                state.viewValues.mainDate[1].setDate(lastDate.getDate())
                                if (state.viewValues.mainDate[0] > state.viewValues.mainDate[1]) {
                                    const t = state.viewValues.mainDate[0]
                                    state.viewValues.mainDate[0] = state.viewValues.mainDate[1]
                                    state.viewValues.mainDate[1] = t
                                }
                                state.viewValues.mainPanel = state.viewValues.mainDate.map((item) => new Date(item))
                            }
                            myRender()
                        } else {
                            date.setDate(current.day)
                            if (current.type === 'pre-month') date.setMonth(date.getMonth() - 1)
                            else if (current.type === 'next-month') date.setMonth(date.getMonth() + 1)
                            state.values[0] = date
                            state.popup[0].visible = false
                        }
                    },
                }, current.day))),
            ]),
        ]),
    ])
}

const createListPopupPanel = (formatList, panelIndex) => {
    const popupIndex = state.popup[1].activeType === 'onlyOnePopup' ? 0 : 1
    return h('div', {
        class: {
            'list-popup-container': true,
            'popup-inner-false': state.popup[1].activeType === 'onlyOnePopup',
        },
        style: {
            height: state.popup[popupIndex].visible ? '270px' : '0px',
        },
        onClick: (event) => event.stopPropagation(),
    }, [
        formatList.map((item) => createList(item, panelIndex, format(state.viewValues.mainPanel[panelIndex], item))),
    ])
}

const createList = (type, panelIndex, value) => {
    const list = []
    switch (type) {
    case 'YYYY':
        for (let i = 1901; i <= 2100; i++) { list.push(i) }
        break
    case 'MM':
        for (let i = 1; i <= 12; i++) { list.push(i) }
        break
    case 'HH':
        for (let i = 0; i < 24; i++) { list.push(i) }
        break
    case 'mm':
        for (let i = 0; i < 60; i++) { list.push(i) }
        break
    case 'ss':
        for (let i = 0; i < 60; i++) { list.push(i) }
        break
    case 'Q':
        for (let i = 1; i < 5; i++) { list.push(`Q${i}`) }
        break
    default:
        break
    }
    let currentIndex = -1
    const setValue = (item) => {
        const date = (!needConfirm.value && state.popup[1].activeType === 'onlyOnePopup' ? state.values[panelIndex] : state.viewValues.mainPanel[panelIndex]) || new Date()
        switch (type) {
        case 'YYYY':
            date.setFullYear(item)
            break
        case 'MM':
            date.setMonth(item - 1)
            break
        case 'HH':
            date.setHours(item)
            break
        case 'mm':
            date.setMinutes(item)
            break
        case 'ss':
            date.setSeconds(item)
            break
        case 'Q':
            date.setMonth(item[1] * 3 - 3)
            break
        default:
            break
        }
        if (!needConfirm.value) {
            if (state.popup[1].activeType === 'onlyOnePopup') {
                state.values[panelIndex] = new Date(date)
                state.popup[0].visible = false
            } else {
                state.popup[1].visible = false
            }
        }
        myRender()
    }
    const setPosition = () => {
        if (!vnode.el) return
        vnode.el.scrollTop = 44 * currentIndex - 100
    }
    const vnode = h('div', {
        class: 'list-container',
    }, [
        list.map((item, index) => {
            if (type === 'Q') {
                if (item == `Q${value}`) currentIndex = index
            } else if (item == value) currentIndex = index
            return h('div', {
                class: {
                    'list-item': true,
                    current: type === 'Q' ? item == `Q${value}` : item == value,
                },
                // todo；TODO；存疑，onClick第一次不会响应
                onMousedown: (event) => {
                    console.log(event, event.isTrusted, item)
                    setValue(item)
                },
            }, item)
        }),
    ])
    if (currentIndex !== -1) {
        nextTick(() => {
            setPosition()
        })
    }

    return vnode
}

onMounted(() => {
    myRender()
    document.addEventListener('click', () => {
        state.popup[0].visible = false
        state.popup[1].visible = false
    })
})
</script>
<style scoped>
:deep(.rc-date-picker-inner) {
    position: relative;
}

:deep(.rc-date-picker-input) {
    display: flex;
    width: 100%;
    min-width: 200px;
    height: 34px;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e0e0e6;
    border-radius: 4px;
    line-height: 34px;
}

:deep(.rc-date-picker-input:hover) {
    border-color: #409eff;
}

:deep(.input-inner-suffix) {
    opacity: 0;
    pointer-events: none;
}

:deep(.rc-date-picker-input:hover .input-inner-suffix) {
    opacity: 1;
    cursor: pointer;
    pointer-events: all;
}

:deep(.rc-date-picker-input.active) {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgb(25 38 158 / 20%);
}

:deep(.input-inner) {
    flex: 1;
    margin: 0 10px;
    border: none;
    outline: none;
    text-align: center;
}

:deep(.input-icon) {
    padding: 0 6px;
}

:deep(.popup-container) {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    transition: 0.2s;
    border-radius: 3px;
    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
    user-select: none;
}

:deep(.top-container) {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #e0e0e6;
}

:deep(.date-picker-panel) {
    width: 290px;
    border-right: 1px solid #e0e0e6;
    border-bottom: 1px solid #e0e0e6;
    border-left: 1px solid #e0e0e6;
}

:deep(.oprate) {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px 0;
}

:deep(.oprate .step) {
    vertical-align: middle;
}

:deep(.oprate-pre),
:deep(.oprate-suf) {
    margin-top: 4px;
}

:deep(.oprate-icon) {
    cursor: pointer;
}

:deep(.oprate-up) {
    margin-left: 10px;
}

:deep(.oprate-down) {
    margin-right: 10px;
}

:deep(.main-panel-date) {
    position: relative;
    padding: 4px;
    transition: 0.5s;
    cursor: pointer;
}

:deep(.main-panel-date:hover) {
    background-color: #e4e4e4;
}

:deep(.panel-input) {
    width: 100px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #e0e0e6;
    border-radius: 4px;
    outline: none;
}

:deep(.calendar) {
    padding: 4px 10px;
}

:deep(.title-of-week-container) {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid #e0e0e6;
}

:deep(.title-of-week),
:deep(.date-node) {
    width: 38px;
    height: 32px;
    line-height: 32px;
}

:deep(.date-node.current) {
    background-color: #409eff !important;
}

:deep(.date-node.first-range) {
    background-color: #409eff;
}

:deep(.date-node.in-range) {
    background-color: #40a0ff4d;
}

:deep(.date-node.last-range) {
    background-color: #409eff !important;
}

:deep(.date-node:hover) {
    background-color: #40a0ff7a;
}

:deep(.date-node.pre-month),
:deep(.date-node.next-month) {
    color: rgb(194 194 194);
}

:deep(.main-date-choose) {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    cursor: pointer;
}

:deep(.footer) {
    height: 30px;
    padding: 6px 20px 0 0;
    text-align: right;
}

:deep(.footer .btn) {
    margin-left: 16px;
}

:deep(.list-popup-container) {
    display: flex;
    position: absolute;
    z-index: 2;
    top: 30px;
    left: 0;
    flex-direction: row;
    transition: 0.2s;
    background-color: white;
    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
}

:deep(.popup-inner-false) {
    position: static;
    box-shadow: none;
}

:deep(.list-container) {
    width: 100%;
    min-width: 90px;
    overflow: auto;
}

:deep(.list-item) {
    align-items: center;
    height: 40px;
    margin: 0 2px;
    padding: 2px 0;
    border-radius: 4px;
    line-height: 40px;
}

:deep(.list-item.current) {
    background-color: rgb(243 243 245);
    color: #409eff;
}

:deep(.list-item:hover) {
    background-color: rgb(243 243 245);
}
</style>
